<template>
  <div class="select-lang">
    <el-dropdown @command="handleSetLanguage" :hide-on-click="false">
      <span class="el-dropdown-link">
        {{ $t('language.selectLang') }}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="zh-cn">
            <el-icon v-if="language === 'zh-cn'"><CaretRight /></el-icon>
            <span
              :class="{
                'item-text': language !== 'zh-cn',
                'item-text-color': language === 'zh-cn'
              }"
              >中文</span
            >
          </el-dropdown-item>
          <el-dropdown-item command="en">
            <el-icon v-if="language === 'en'"><CaretRight /></el-icon
            ><span
              :class="{
                'item-text': language !== 'en',
                'item-text-color': language === 'en'
              }"
              >English</span
            ></el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useI18n } from 'vue-i18n'
const store = useStore()
// 实例化i18
const i18 = useI18n()
const language = computed(() => store.state.language)

// 进行语言切换
const handleSetLanguage = (lang: string) => {
  i18.locale.value = lang
  store.commit('setLanguage', lang)
}
</script>
<style scoped lang="less">
.select-lang {
  .el-tooltip__trigger:focus-visible {
    outline: unset;
  }
}
.item-text {
  margin-left: 20px;
}
.item-text-color {
  color: #409eff;
}
</style>
